// 登录注册页面交互逻辑
document.addEventListener('DOMContentLoaded', () => {
    // 获取DOM元素
    const loginTab = document.getElementById('login-tab');
    const registerTab = document.getElementById('register-tab');
    const loginForm = document.getElementById('login-form');
    const registerForm = document.getElementById('register-form');
    const togglePasswordBtns = document.querySelectorAll('.toggle-password');
    const forms = document.querySelectorAll('form');

    // 标签切换逻辑
    function switchTab(activeTab, activeForm, inactiveTab, inactiveForm) {
        activeTab.classList.add('active');
        inactiveTab.classList.remove('active');
        activeForm.style.display = 'flex';
        inactiveForm.style.display = 'none';
    }

    loginTab.addEventListener('click', () => {
        switchTab(loginTab, loginForm, registerTab, registerForm);
    });

    registerTab.addEventListener('click', () => {
        switchTab(registerTab, registerForm, loginTab, loginForm);
    });

    // 密码显示切换
    togglePasswordBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            const input = btn.previousElementSibling;
            const type = input.getAttribute('type');
            input.setAttribute('type', type === 'password' ? 'text' : 'password');
            btn.innerHTML = type === 'password' ? 
                '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>' : 
                '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>';
        });
    });

    // 表单验证
    forms.forEach(form => {
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // 获取表单数据
            const formData = new FormData(form);
            const data = Object.fromEntries(formData.entries());
            
            // 基本验证
            let isValid = true;
            const errors = {};

            // 邮箱验证
            if (data.email) {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(data.email)) {
                    isValid = false;
                    errors.email = '请输入有效的邮箱地址';
                }
            }

            // 密码验证
            if (data.password) {
                if (data.password.length < 6) {
                    isValid = false;
                    errors.password = '密码长度至少为6位';
                }
            }

            // 注册表单的额外验证
            if (form.id === 'register-form') {
                // 确认密码验证
                if (data.confirmPassword !== data.password) {
                    isValid = false;
                    errors.confirmPassword = '两次输入的密码不一致';
                }

                // 用户协议验证
                if (!data.agreement) {
                    isValid = false;
                    errors.agreement = '请阅读并同意用户协议';
                }
            }

            // 显示错误信息
            const errorElements = form.querySelectorAll('.error-message');
            errorElements.forEach(el => el.remove());

            if (!isValid) {
                Object.keys(errors).forEach(key => {
                    const input = form.querySelector(`[name="${key}"]`);
                    if (input) {
                        const errorDiv = document.createElement('div');
                        errorDiv.className = 'error-message';
                        errorDiv.style.color = 'var(--error-color)';
                        errorDiv.style.fontSize = '0.875rem';
                        errorDiv.style.marginTop = '0.25rem';
                        errorDiv.textContent = errors[key];
                        input.parentNode.appendChild(errorDiv);
                    }
                });
                return;
            }

            // TODO: 发送登录/注册请求到后端
            console.log('Form submitted:', data);
            
            // 模拟登录/注册成功
            alert(form.id === 'login-form' ? '登录成功！' : '注册成功！');
        });
    });

    // 社交登录按钮点击事件
    const socialBtns = document.querySelectorAll('.social-btn');
    socialBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            const platform = btn.dataset.platform;
            // TODO: 实现社交登录逻辑
            console.log(`${platform} login clicked`);
        });
    });
});
